import React, { useState, useEffect } from 'react';

interface DevToolbarProps {
  config?: {
    plugins?: any[];
  };
}

/**
 * A simplified development toolbar component that mimics stagewise's functionality
 * This is a placeholder that can be replaced with the actual stagewise toolbar when available
 */
const DevToolbar: React.FC<DevToolbarProps> = ({ config = { plugins: [] } }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(null);
  const [comment, setComment] = useState('');

  // Handle element selection
  const handleElementSelection = (event: MouseEvent) => {
    if (isVisible) {
      event.preventDefault();
      event.stopPropagation();
      const target = event.target as HTMLElement;
      setSelectedElement(target);
    }
  };

  // Setup event listeners
  useEffect(() => {
    if (isVisible) {
      document.addEventListener('click', handleElementSelection, true);
      // Add highlight styles to the page
      const style = document.createElement('style');
      style.id = 'dev-toolbar-styles';
      style.innerHTML = `
        .dev-toolbar-highlight {
          outline: 2px solid #3b82f6 !important;
          outline-offset: 2px !important;
        }
      `;
      document.head.appendChild(style);
    } else {
      document.removeEventListener('click', handleElementSelection, true);
      // Remove highlight styles
      const style = document.getElementById('dev-toolbar-styles');
      if (style) {
        style.remove();
      }
    }

    return () => {
      document.removeEventListener('click', handleElementSelection, true);
      const style = document.getElementById('dev-toolbar-styles');
      if (style) {
        style.remove();
      }
    };
  }, [isVisible]);

  // Add highlight class to selected element
  useEffect(() => {
    if (selectedElement) {
      selectedElement.classList.add('dev-toolbar-highlight');
    }

    return () => {
      if (selectedElement) {
        selectedElement.classList.remove('dev-toolbar-highlight');
      }
    };
  }, [selectedElement]);

  if (process.env.NODE_ENV !== 'development') {
    return null;
  }

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gray-900 text-white p-2 shadow-lg">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <button 
            onClick={() => setIsVisible(!isVisible)}
            className={`px-3 py-1 rounded text-sm font-medium ${isVisible ? 'bg-blue-600' : 'bg-gray-700'}`}
          >
            {isVisible ? 'Cancel Selection' : 'Select Element'}
          </button>
          
          {selectedElement && (
            <div className="flex items-center space-x-2">
              <input
                type="text"
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                placeholder="Add a comment..."
                className="px-2 py-1 bg-gray-800 rounded text-sm border border-gray-700 text-white"
              />
              <button 
                onClick={() => {
                  console.log('Element:', selectedElement);
                  console.log('Comment:', comment);
                  alert(`Comment saved for ${selectedElement.tagName.toLowerCase()}${selectedElement.className ? '.' + selectedElement.className.split(' ')[0] : ''}`);
                  setSelectedElement(null);
                  setComment('');
                  setIsVisible(false);
                }}
                className="px-3 py-1 bg-green-600 rounded text-sm"
                disabled={!comment}
              >
                Save
              </button>
            </div>
          )}
        </div>
        
        <div className="text-xs text-gray-400">
          Dev Toolbar
        </div>
      </div>
    </div>
  );
};

export default DevToolbar; 